<template>
	<view class="content">
		<view class="map">
			<map @markertap="onmarkertap" :scale="18" :markers="markers" id="map" :longitude="location.longitude"
				:latitude="location.latitude"></map>
			<view class="box">
				<view class="gy">房屋信息</view>
				<view class="room">
					<text>北京西三旗花园1号楼101</text>
					<view class="onsite">上门中</view>
				</view>
				<view class="gy">报修信息</view>
			</view>

			<!-- 报修信息 -->
			<view class="">
				<view class="repair">
					<text>维修项目</text>
					<text>水暖</text>
				</view>
				<view class="repair">
					<text>手机号码</text>
					<text>18335255252</text>
				</view>
				<view class="repair">
					<text>预约日期</text>
					<text>2022/08/12</text>
				</view>
			</view>

			<!-- 问题描述 -->
			<view class="dsc">
				<view> 问题描述</view>
				<view>每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定，时有时无。</view>
			</view>

			<!--问题附件 -->
			<view class="dsc bot">
				<view> 问题附件</view>
				<view class="pic">
					<image src="../../static/icon/样图.png"></image>
					<image src="../../static/icon/样图.png"></image>
					<image src="../../static/icon/样图.png"></image>
				</view>
			</view>
			<!--  -->
		</view>
</template>

<script>
	import qqmapwx from '@/utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0
				}],
				currentLocation: '定位中',
				communityList: []
			};
		},
		onLoad() {
			this.initLocation()
		},
		methods: {
			onmarkertap(e) {
				console.log(e)
			},
			// 初始化定位
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						// console.log(res)
						this.uploadLocation(res)
						// 将坐标解析文本
						this.initLocationText()
						this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				// console.log('坐标解析')
				// console.log(qqmapwx)
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						console.log(res.result)
						this.currentLocation = res.result.address
					}
				})
			},
			// uploadLocation 分装
			uploadLocation(res) {
				this.currentLocation = res.name
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			// 重新选择定位
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						console.log(res)
						if (!res.name) return
						this.currentLocation = res.name
						this.uploadLocation(res)
						this.searchCommunity()
					}
				})
			},
			// search 附近小区
			searchCommunity() {
				qqmapwx.search({
					location: this.location,
					keyword: '小区住宅',
					success: (res) => {
						console.log(res)
						this.communityList = res.data
						res.data.forEach(item => {
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 20,
								height: 20,
								iconPath: '/static/icon/house.png',
								title: item.title
							})
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 84rpx;
	}

	.map map {
		width: 750rpx;
		height: 440rpx;
	}

	.box {
		// padding: 15px;
		box-sizing: border-box;
		background-color: #fafafa;

		.gy {
			height: 86rpx;
			width: 100%;
			line-height: 86rpx;
			padding-left: 30rpx;
			font-weight: regular;
			color: #979797;
			font-size: 24rpx;
			box-sizing: border-box;
		}
	}

	.room {
		width: 750rpx;
		height: 102rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;
		font-weight: regular;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.onsite {
			width: 128rpx;
			height: 48rpx;
			color: #27AE60;
			border-radius: 10rpx;
			background: #EBF8F0;
			font-size: 24rpx;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.repair {
		height: 102rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;
		font-weight: regular;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F2F2F6;

		text:nth-child(1) {
			width: 208rpx;
		}
	}

	.dsc {
		height: 248rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		margin: 30rpx;
		font-weight: regular;
		font-size: 28rpx;
		border-bottom: 1px solid #F2F2F6;


		view:nth-child(1) {
			height: 42rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
		}
	}

	.bot {
		padding-bottom: 20rpx;
		// margin-bottom: 84rpx;
		// overflow: hidden;

		.pic {
			display: flex;

			image {
				width: 154rpx;
				height: 154rpx;
				padding-right: 10rpx;
			}
		}
	}
</style>
